<template>
  <div
    class="gongzuo"
    v-show="isQuxian"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="biaoti">监督检查工作统计</div>
    <div class="tap">
      <div :class="active==0?'active':''" @click="change(0)">监督记录统计</div>
      <div :class="active==1?'active':''" @click="change(1)">最新监督记录</div>
    </div>
    <div class="tongji" v-show="active ===0">
      <!-- <div class="title">监督记录统计</div> -->
      <div class="qiu">
        <div>
          {{jiandutongjiData.hege}}
          <br />合格
        </div>
        <div>
          {{jiandutongjiData.zongji}}
          <br />总计
        </div>
        <div>
          {{jiandutongjiData.buhege}}
          <br />不合格
        </div>
      </div>
    </div>
    <div class="jilu" v-show="active ==1">
      <!-- <div class="title">最新监督记录</div> -->
      <table v-show="zuixinjiandujiluData.length">
        <tr>
          <th>被监督单位（个人）</th>
          <th>日期</th>
          <th>监督结果</th>
        </tr>
        <tr v-for="item of zuixinjiandujiluData" :key="item.id">
          <td>{{item.compName}}</td>
          <td>{{item.date}}</td>
          <td>
            <div :class="item.status == '合格'?'':'no'"></div>
            {{item.status}}
          </td>
        </tr>
      </table>
      <div v-show="!zuixinjiandujiluData.length">暂无记录</div>
    </div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getJianDuJiLu, getZuiXinJianDu } from "@/api/gaikuang";

export default {
  name: "GongZuoTongJi",
  data() {
    return {
      loading: true,
      active: 0,
      isQuxian: false,
      areaCity: {
        name: "霸州市",
        code: "131081"
      },
      jiandutongjiData: { hege: 70, zongji: 80, buhege: 10 },

      zuixinjiandujiluData: [
        {
          compName: "人民医院",
          reportId: "1",
          date: "2020-02-03",
          status: "0" //监督结果（1合格2违规3整改4处罚）
        },
        {
          compName: "人民医院",
          reportId: "2",
          date: "2020-02-03",
          status: "2"
        },
        {
          compName: "人民医院",
          reportId: "3",
          date: "2020-02-03",
          status: "0"
        },
        {
          compName: "人民医院",
          reportId: "4",
          date: "2020-02-03",
          status: "2"
        }
      ]
    };
  },
  methods: {
    async getData() {
      this.loading = true;
      let y = new Date().getFullYear();
      // try {
      var json = (
        await getJianDuJiLu({
          year: this.$store.state.YEAR,
          areaCode: this.areaCity.code
        })
      ).data.data;
      var json2 = (
        await getZuiXinJianDu({
          year: this.$store.state.YEAR,
          areaCode: this.areaCity.code,
          limit: 4
        })
      ).data.data;

      // } catch (error) {
      //   var json = { qualified: 100, unqualified: 100, total: 2 };
      //   var json2 = [
      //     {
      //       date: "2019-09-09",
      //       reportId: "80824EE6D25EA3BEE053140A10ACD40A",
      //       compName: "霸州鸿昇博海医院",
      //       status: "1"
      //     }
      //   ];
      // }
      console.log(json2);

      this.jiandutongjiData.hege = json.qualified;
      this.jiandutongjiData.zongji = json.total;
      this.jiandutongjiData.buhege = json.unqualified;

      this.zuixinjiandujiluData = json2;
      this.loading = false;
    },
    change(e) {
      this.active = e;
    },
    suijishu(num) {
      if (num > 1) {
        let arr = [];
        for (let i = 0; i < num; i++) {
          arr.push((Math.random() * 100).toFixed(0));
        }
        return arr;
      } else {
        return (Math.random() * 100).toFixed(0);
      }
    }
  },

  created() {
    this.getData();
    Bus.$on("isQuxian", e => {
      this.isQuxian = e;
    });
    Bus.$on("AreaItem", e => {
      if (this.isQuxian) {
        this.areaCity = e;
        this.getData();
      }
    });
  }
};
</script>

<style scoped lang="less">
.gongzuo {
  border: 0.0625rem solid #2c4daa;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-around;

  .biaoti {
    // font-size: 1.25rem;
    // text-align: center;
    // color: #07ccff;
    // line-height: 2rem;

    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
  }

  .title {
    text-align: center;
    color: #07ccff;
    font-size: 0.8125rem;
  }
  .tap {
    display: flex;
    justify-content: space-around;
    & > div {
      cursor: pointer;
      border: 1px solid #fff;
      padding: 8px 10px;
      border-radius: 5px;
    }
    .active {
      color: #07ccff;
      border-color: #07ccff;
    }
    line-height: 1rem;
  }
  .tongji {
    height: calc(100% - 4.8rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    & > div:last-of-type {
      display: flex;
      justify-content: space-around;
      padding: 0.2rem 0;

      & > div {
        font-size: 12rem/16rem;

        height: 6rem;
        width: 6rem;
        border: 0.2rem solid #6bca56;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      & > div:nth-of-type(1) {
        border-style: dashed;
        background: #6bca56;
        padding: 0.2rem;
        background-clip: content-box;
      }

      & > div:nth-of-type(2) {
        background: #01c9fd;
        border-color: #01c9fd;
      }

      & > div:nth-of-type(3) {
        border-style: dashed;
        background: #eb7b39;
        border-color: #eb7b39;
        padding: 0.2rem;
        background-clip: content-box;
      }
    }
  }

  .jilu {
    display: flex;
    align-items: center;
    height: calc(100% - 5rem);
    & > div {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    table {
      padding: 0 1.4rem;
      width: 100%;
      height: 100%;
      tr {
        // height: 20%;
        th {
          text-align: left;
          color: #07ccff;
          font-size: 14rem/16rem;
          line-height: 1.8rem;
        }

        td {
          font-size: 12rem/16rem;
          line-height: 1rem;

          div {
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            background: #6ccb55;
            border-radius: 50%;
          }

          .no {
            background-color: #eb7c37;
          }
        }

        th:nth-of-type(2) {
          text-align: center;
        }

        td:nth-of-type(2) {
          text-align: center;
          border-right: 0.0625rem #2f4ea8 dashed;
          border-left: 0.0625rem #2f4ea8 dashed;
        }

        th:nth-of-type(3) {
          text-indent: 3em;
        }

        td:nth-of-type(3) {
          text-indent: 4em;
        }
      }
    }
  }
}
</style>